<template>
  <div>
    <div>
      <Card title="编辑品牌" :bordered="false" dis-hover class="ivu-mt">
        <Form
          ref="brandForm"
          :model="brandFormData"
          :rules="brandFormRules"
          :label-width="140"
        >
          <Row>
            <Col span="18" offset="3">
              <FormItem label="品牌名称：" prop="brandName">
                <Input
                  v-model="brandFormData.brandName"
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入品牌名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="品牌英文名称：" prop="brandEnName">
                <Input
                  v-model="brandFormData.brandEnName"
                  placeholder="请输入品牌英文名称"
                  maxlength="20"
                  show-word-limit
                  @keyup.native="keyupNative('brandEnName')"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="厂家品牌中文名：" prop="factoryBrandName">
                <Input
                  v-model="brandFormData.factoryBrandName"
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入品牌名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="厂家品牌英文名：" prop="factoryBrandEnName">
                <Input
                  v-model="brandFormData.factoryBrandEnName"
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入品牌英文名称"
                  @keyup.native="keyupNative('factoryBrandEnName')"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="档次定位(内部)：">
                <Select
                  v-model="brandFormData.insideLevel"
                  style="width: 200px"
                >
                  <Option
                    v-for="(item, index) in levelMap"
                    :value="item.value"
                    :key="index"
                    >{{ item.label }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="档次定位(外部)：">
                <Select
                  v-model="brandFormData.outsideLevel"
                  style="width: 200px"
                >
                  <Option
                    v-for="(item, index) in levelMap"
                    :value="item.value"
                    :key="index"
                    >{{ item.label }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="系列：">
                <Input
                  v-model="brandFormData.series"
                  placeholder="请输入系列名称，多个使用英文逗号隔开"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="主品牌：">
                <!-- <Select v-model="brandFormData.parentUuid" style="width:200px">
                            <Option v-for="(item,index) in allBrandData" :value="item.uuid" :key="index">{{
                                item.brandName }}</Option>
                        </Select> -->
                <Input
                  v-model="brandFormData.parentName"
                  placeholder="请选择品牌"
                  :data="brandNameData"
                  @on-search="brandChange"
                  @on-blur="brandChangeBlurFun"
                  readonly
                  style="width: 200px"
                />
                <Button
                  icon="ios-search"
                  style="margin-right: 50px"
                  @click="searchBrandFun"
                />
              </FormItem>
              <FormItem label="状态：">
                <RadioGroup v-model="brandFormData.brandState">
                  <Radio label="1">启用</Radio>
                  <Radio label="2">禁用</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="厂家品牌影响力是否大于商品品牌：">
                <RadioGroup v-model="brandFormData.factoryInfluenceMore">
                  <Radio label="1">是</Radio>
                  <Radio label="2">否</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="长方形图：" prop="imageKey2">
                <Upload
                  class="ivu-mr qw-disflex"
                  :defaultList="brandImageKey2"
                  :mr="16"
                  :maxSize="2048"
                  :maxLen="1"
                  :format="['jpg', 'jpeg', 'png']"
                  @handleChangeImage="changeImageKey2"
                >
                </Upload>
                <p>提示: 上传图片大小不能超过2048K,尺寸750px*360px</p>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="正方形图：" prop="imageKey2">
                <Upload
                  class="ivu-mr qw-disflex"
                  :defaultList="brandImageKey1"
                  :mr="16"
                  :maxSize="2048"
                  :maxLen="1"
                  :format="['jpg', 'jpeg', 'png']"
                  @handleChangeImage="changeImageKey1"
                >
                </Upload>
                <p>提示: 上传图片大小不能超过2048K,尺寸100px*100px，比例1:1</p>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="厂家Logo：" prop="factoryLogo">
                <Upload
                  class="ivu-mr qw-disflex"
                  :defaultList="brandImageKey3"
                  :mr="16"
                  :maxSize="2048"
                  :maxLen="1"
                  :format="['jpg', 'jpeg', 'png']"
                  @handleChangeImage="changeImageKey3"
                >
                </Upload>
                <p>提示: 上传图片大小不能超过2048K,尺寸100px*100px，比例1:1</p>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem label="品牌描述：">
                <Input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  maxlength="200"
                  show-word-limit
                  v-model="brandFormData.note"
                  placeholder="请输入品牌描述"
                ></Input>
              </FormItem>
            </Col>
            <Col span="18" offset="3">
              <FormItem>
                <Button
                  type="primary"
                  :loading="isLoading"
                  @click="handleSubmit()"
                  >提交</Button
                >
                <Button type="default" @click="goBack" class="ivu-ml-8"
                  >返回</Button
                >
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
    <!-- 搜索品牌列表 -->
    <Modal v-model="searchBrandModal" title="选择品牌" width="70%">
      <Card dis-hover>
        <Row type="flex" justify="start" align="bottom">
          <Col style="margin-right: 40px">
            <span style="margin-right: 10px">品牌名称</span>
            <Input
              style="width: auto"
              v-model="brandNameModel"
              placeholder="请输入品牌名称"
            ></Input>
          </Col>
          <Col>
            <Button
              type="primary"
              style="margin-right: 10px"
              @click="linkBrandBt('1')"
              >查询</Button
            >
            <Button @click="linkBrandBt('0')">清空</Button>
          </Col>
        </Row>
      </Card>
      <Card dis-hover>
        <Row>
          <Table :columns="linkBrandCol" border :data="linkBrandData">
            <template slot-scope="{ row, index }" slot="factoryInfluenceMore">
              <span v-if="row.factoryInfluenceMore === '1'">大于品牌</span>
              <span v-if="row.factoryInfluenceMore === '2'">小于品牌</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button
                type="primary"
                size="small"
                style="margin: 3px 0"
                @click="selectBrandBt(row)"
                >选择</Button
              >
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page
              :total="totalNum"
              transfer
              show-total
              show-sizer
              :current.sync="nowPage"
              @on-change="brandChange"
              @on-page-size-change="handleBrandChange($event)"
            />
          </div>
        </Row>
      </Card>
    </Modal>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import brandUpdata from './configjs/brandUpdata';
import Upload from '@/components/common/upload'; // 上传组件
export default {
  components: { Upload },
  mixins: [brandUpdata],
  data () {
    return {
      searchBrandModal: false,
      brandNameModel: '',
      linkBrandData: [],
      pageShow: 10,
      nowPage: 1,
      totalNum: 0,
      linkBrandCol: [
        // {
        // 	type: 'selection',
        // 	width: 60,
        // 	align: 'center'
        // },
        {
          title: '品牌名称',
          key: 'brandName',
          minWidth: 120
        },
        {
          title: '厂家品牌名称',
          key: 'factoryBrandName',
          minWidth: 140
        },
        {
          title: '厂家品牌影响力',
          slot: 'factoryInfluenceMore',
          minWidth: 150
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 100
        }
      ],
      allBrandData: [],
      isLoading: false,
      requestApi: {
        // 视情况自定义
        // 获取编辑页面数据
        getEditPageInfo: {
          url: '/sysback/productbrand/productbrandaudit/baseGetByUuid', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 编辑品牌信息
        saveBrandInfo: {
          url: '/sysback/productbrand/productbrandaudit/updateProductBrand', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 获取所有品牌
        getAllProductBrands: {
          url: '/sysback/productbrand/productbrandaudit/getAllProductBrands', // 接口地址
          type: 'post' // 接口请求类型
        }
      },
      levelMap: [
        {
          value: '1',
          label: '高'
        },
        {
          value: '2',
          label: '中高'
        },
        {
          value: '3',
          label: '中'
        },
        {
          value: '4',
          label: '中低'
        },
        {
          value: '5',
          label: '低'
        }
      ]
    };
  },
  created () {
    this.getAllProductBrands();
    this.getBrandInfo();
  },
  methods: {
    // 品牌列表
    searchBrandFun () {
      this.searchBrandModal = true;
      let searchParam = [];
      searchParam.push({ name: 'brandName', value: this.brandNameModel });
      searchParam.push({ name: 'brandName_q', value: 'Like' });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortType: 'desc'
      };
      // 开始请求列表
      ApiRequest(
        this.requestApi.baseQueryList.url,
        this.requestApi.baseQueryList.type,
        data
      ).then(res => {
        if (res.retStatus === '1') {
          this.linkBrandData = res.retData.results;
          this.totalNum = res.retData.totalNum;
        }
      });
    },
    // 选择品牌
    selectBrandBt (row) {
      this.brandFormData.parentName = row.brandName;
      this.brandFormData.parentUuid = row.uuid;
      this.searchBrandModal = false;
    },
    linkBrandBt (type) {
      if (type === '0') {
        this.brandNameModel = '';
      }
      this.searchBrandFun();
    },
    brandChange (e) {
      this.nowPage = e;
      this.searchBrandFun();
    },
    handleBrandChange (e) {
      this.pageShow = e;
      this.searchBrandFun();
    },
    keyupNative (name) {
      // 空格回退
      this.brandFormData[name] = this.brandFormData[name].replace(/[, ]/g, '');
      // 不允许输入中文
      this.brandFormData[name] = this.brandFormData[name].replace(
        /[\u4e00-\u9fa5]/gi,
        ''
      );
      // 不允许输入特殊符号
      this.brandFormData[name] = this.brandFormData[name]
        .replace(
          /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
          ''
        )
        .replace(/\s/g, '');
    },
    // 开始请求所有品牌信息
    getAllProductBrands () {
      // this.isLoading = true;
      ApiRequest(
        this.requestApi.getAllProductBrands.url,
        this.requestApi.getAllProductBrands.type,
        {},
        false
      ).then(res => {
        if (res.retStatus === '1') {
          this.allBrandData = res.retData ? res.retData : [];
        }
        // this.isLoading = false;
      });
    },
    // 返回
    goBack () {
      this.$router.go(-1);
    },
    handleSubmit () {
      this.$refs['brandForm'].validate(valid => {
        if (valid) {
          this.isLoading = true;
          this.brandFormData.uuid = this.uuid;
          // 开始请求会员信息
          ApiRequest(
            this.requestApi.saveBrandInfo.url,
            this.requestApi.saveBrandInfo.type,
            this.brandFormData,
            false
          ).then(res => {
            if (res.retStatus === '1') {
              this.$Message.success('修改成功!');
              this.$router.go(-1);
            }
            this.isLoading = false;
          });
        } else {
          this.$Message.error('请完善信息!');
        }
      });
    },
    getBrandInfo () {
      this.isLoading = true;
      let data = {
        uuid: this.uuid
      };
      ApiRequest(
        this.requestApi.getEditPageInfo.url,
        this.requestApi.getEditPageInfo.type,
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          if (res.retData !== '') {
            let rData = res.retData;
            this.brandFormData = {
              brandName: rData.brandName,
              brandEnName: rData.brandEnName,
              note: rData.note,
              insideLevel: rData.insideLevel,
              outsideLevel: rData.outsideLevel,
              series: rData.series,
              parentUuid: rData.parentUuid,
              brandState: rData.brandState,
              factoryInfluenceMore: rData.factoryInfluenceMore,
              factoryBrandName: rData.factoryBrandName,
              factoryBrandEnName: rData.factoryBrandEnName,
              imageKey1: rData.imageKey1,
              imageKey2: rData.imageKey2,
              factoryLogo: rData.factoryLogo,
              parentName: rData.parentName
            };
            this.resetBrandFormData = JSON.parse(
              JSON.stringify(this.brandFormData)
            );
            if (rData.imageKey1 && rData.imageKey1 !== '') {
              this.brandImageKey1.push({
                url: '/' + rData.imageKey1,
                name: '' // 图片/视频名称
              });
            }
            if (rData.imageKey2 && rData.imageKey2 !== '') {
              this.brandImageKey2.push({
                url: '/' + rData.imageKey2,
                name: '' // 图片/视频名称
              });
            }
            if (rData.factoryLogo && rData.factoryLogo !== '') {
              this.brandImageKey3.push({
                url: '/' + rData.factoryLogo,
                name: '' // 图片/视频名称
              });
            }
          }
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>